@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";

.a4a-events {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-end: 32px;
}

.a4a-event__date--klaviyo {
	color: var(--color-klaviyo);
}

.a4a-event__date--wordcamp {
	color: var(--color-error);
}

.a4a-event__date--woo {
	color: var(--color-woo);
}

.a4a-event__date--a4a {
	color: var(--color-primary);
}

.a4a-event__date--vip {
	color: var(--color-vip);
}

.a4a-event__date--neutral {
	color: var(--color-neutral-70);
}

.a4a-event__image--a4a,
.a4a-event__image--klaviyo {
	background-size: 90%;
}

.a4a-event__image--woo,
.a4a-event__image--billing-system {
	background-size: auto 110%;
}

.a4a-event__image--wordcamp {
	background-size: 80%;
	background-position: center;
}
